<template>
    <el-card class="account-container">
        <div>
            <div style="margin-bottom: 20px">
                <el-row :gutter="20" style="position: relative">
                    <div class="bottom">
                        <span>商品列表</span>
                        <el-button type="primary" :icon="Search" style="position: absolute;right: 0" @click="function() {
                      router.push('/addgood')
                    }">添加商品</el-button>
                    </div>
                </el-row>
            </div>
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    border
            >
                <el-table-column width="200" label="商品状态">
                    <template #default="props">
                        <el-tag size="large"  type="warning" >正在审核</el-tag>
                    </template>
                </el-table-column>

                <el-table-column prop="name" label="名称" width="180" />
                <el-table-column width="200" prop="price" label="价格" />
                <el-table-column label="Operations">
                    <template #default="props">
                        <el-button
                                type="primary"
                                @click="modifydish(props.row.id)"
                        >编辑</el-button>
                        <el-button
                                type="danger"
                                @click="changeStatus(props.row.id,-1)"
                        >删除</el-button
                        >
                    </template>
                </el-table-column>
                <el-table-column type="expand">
                    <template #default="props">
                        <el-descriptions
                                direction="vertical"
                                :column="4"
                                :size="size"
                                border
                        >
                            <el-descriptions-item label="分类">{{props.row.typeName}}</el-descriptions-item>
                            <el-descriptions-item label="顺序">
                                <el-tag v-if="props.row.level==1" >置顶</el-tag>
                                <el-tag v-if="props.row.level==2" >靠前</el-tag>
                                <el-tag v-if="props.row.level==3" >居中</el-tag>
                                <el-tag v-if="props.row.level==4" >靠后</el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item label="加入菜单时间">{{ props.row.createTime }}</el-descriptions-item>
                            <el-descriptions-item label="最后编辑时间">{{ props.row.updateTime }}</el-descriptions-item>
                            <el-descriptions-item label="商品图片:"
                            >
                                <div class="demo-image__preview">
                                    <el-image
                                            style="width: 100px; height: 100px"
                                            :src="props.row.image"
                                            :zoom-rate="1.2"
                                            fit="cover"
                                            :preview-src-list="[props.row.image]"
                                            preview-teleported="true"
                                    />
                                </div>
                            </el-descriptions-item
                            >
                            <el-descriptions-item label="商品描述">{{props.row.description}}</el-descriptions-item>
                        </el-descriptions>
                    </template>
                </el-table-column>

            </el-table>
            <el-row class="row-bg" justify="center">
                <el-pagination background layout="prev, pager, next" :total="10" />
            </el-row>
        </div>
    </el-card>
</template>

<script setup>
    import {useStore} from 'vuex'
    import {ref,reactive} from 'vue'
    import {useRouter} from 'vue-router'
    import { ElMessage } from 'element-plus'
    const router=useRouter()
    import axios from 'axios';
    const store=useStore()
    let tableData=ref();
    let input=ref();
    const getMessage=()=>{
        const id=store.getters.getId
        axios.get('/api/merchant/getExamine',{
            params:{
                pageNum:1,
                pageSize:10
            }
        })
            .then(response => {
                // 请求成功处理
                let res=response.data.data;
                tableData.value=res.list;
                console.log(tableData.value)
            })
            .catch(error => {
                // 请求失败处理
                console.error(error);
            });
    }
    const modifydish=(id)=>{
        router.push({
            path:'modifydish',
            query: {
                dishid: id
            }
        })
    }
    const changeStatus=(dishId1,status1)=>{

        axios.get("api/merchant/changeStatus",{
            params:{
                dishId:dishId1,
                status:status1
            }
        }).then(res=>{
            location.reload();
            ElMessage.success("更新成功");

        })
    }
    getMessage();
</script>


<style scoped>
    .demo-image__error .image-slot {
        font-size: 30px;
    }
    .demo-image__error .image-slot .el-icon {
        font-size: 30px;
    }
    .demo-image__error .el-image {
        width: 100%;
        height: 200px;
    }
</style>



<style>


</style>